<template>
  <div class="dangcost">
    <ul>
      <!-- <router-link
        :to="{ name: 'payDetail', query: {id: item.dfxxId} }"
        tag="li"
        v-for="(item, i) in list"
        :key="i"
      > -->
      <li v-for="(item, i) in list" :key="i">
        <div>{{ item.hjsj }}年</div>
        <div>{{ item.hbsj }}月</div>
        <div>{{ item.jfje }}元</div>
      </li>
    </ul>
  </div>
</template>

<script>

import {dfxxquerydata4list} from '../assets/js/api';
export default {
  data() {
    return {
      list: [],
      dspToken: localStorage.dspToken
    };
  },
  mounted() {
    dfxxquerydata4list({
      dspToken: this.dspToken
    }).then(res => {
      console.log(res);
      if (res.code.status === '1') {
        this.list = res.data;
      } else {
        this.$toast('获取数据失败');
      }
    });
  }
};
</script>

<style lang="less" scoped>
.dangcost {
  ul {
    background: #ffffff;
    box-shadow: 3px 4px 9px 1px rgba(1, 88, 155, 0.05);
    border-radius: 8px;
    padding: 0 18px;
    width: 704px;
    margin: 0 auto;
    margin-top: 20px;
    box-sizing: border-box;
    li {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      height: 110px;
      line-height: 110px;
      color: #353535;
      font-size: 34px;
      &:not(:last-child) {
        border-bottom: 1px solid #eeeeee;
      }
      > div:first-child {
        padding-left: 22px;
        text-align: left;
      }
      > div:nth-child(2) {
        text-align: center;
      }
      > div:last-child {
        padding-right: 22px;
        text-align: right;
      }
    }
  }
}
</style>
